import {Button, DatePicker, Input, NavBar} from "antd-mobile";
import {useNavigate} from "react-router-dom";
import {billListData} from "@/contants";
import classNames from "classnames";
import './index.scss'
import Icon from "@/components/Icon";
import {useState} from "react";
import {useDispatch} from "react-redux";
import {addBillList} from '@/store/modules/billStore'
import dayjs from "dayjs";

export default function New() {
    const navigate = useNavigate();
    // 记账类型
    const [billType, setBillType] = useState('pay');
    // 记账金额
    const [money, setMoney] = useState(0)
    // 记账用途
    const [useFor, setUseFor] = useState('')
    // 记账时间
    const [date, setDate] = useState(new Date())

    const [dateVisible, setDateVisible] = useState(false)

    const dispatch = useDispatch();

    const changeMoney = (value) => {
        setMoney(value)
    };

    const changeBillType = (billType) => {
        setBillType(billType)
        setMoney(0)
        setUseFor('')
    }

    const saveBill = () => {
        const data = {
            type: billType,
            money: billType === 'pay' ? -money : +money,
            date: date,
            useFor: useFor
        }
        dispatch(addBillList(data))
        navigate('/month')
    }

    const confirmDate = (value) => {
        console.log(value)
        setDate(value)
        setDateVisible(false)
    }
    return (
        <div className="keepAccounts">
            <NavBar className="nav" onBack={() => navigate(-1)}>
                记一笔
            </NavBar>

            <div className="header">
                <div className="kaType">
                    {/* 2. 点击切换状态 */}
                    <Button
                        shape="rounded"
                        className={billType === 'pay' ? 'selected' : ''}
                        onClick={() => {changeBillType('pay')}}
                    >
                        支出
                    </Button>
                    <Button
                        className={billType === 'income' ? 'selected' : ''}
                        shape="rounded"
                        onClick={() => {changeBillType('income')}}
                    >
                        收入
                    </Button>
                </div>

                <div className="kaFormWrapper">
                    <div className="kaForm">
                        <div className="date">
                            <Icon type='calendar' className="icon" />
                            <span className="text" onClick={() => {setDateVisible(true)}}>
                                {dayjs(date).format('YYYY-MM-DD')}
                            </span>
                            <DatePicker
                                className="kaDate"
                                title="记账日期"
                                max={new Date()}
                                visible={dateVisible}
                                onConfirm={confirmDate}
                                onClose={() => {
                                    setDateVisible(false)
                                }}
                            />
                        </div>
                        <div className="kaInput">
                            <Input
                                className="input"
                                placeholder="0.00"
                                type="number"
                                value={money}
                                onChange={changeMoney}
                            />
                            <span className="iconYuan">¥</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className="kaTypeList">
                {billListData[billType].map(item => {
                    return (
                        <div className="kaType" key={item.type}>
                            <div className="title">{item.name}</div>
                            <div className="list">
                                {item.list.map(item => {
                                    return (
                                        <div
                                            className={classNames('item', item.type === useFor ? 'selected' : '')}
                                            key={item.type}
                                            onClick={() => {setUseFor(item.type)}}
                                        >
                                            <div className="icon">
                                                <Icon type={item.type} />
                                            </div>
                                            <div className="text">{item.name}</div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    )
                })}
            </div>

            <div className="btns">
                <Button className="btn save" onClick={saveBill}>
                    保 存
                </Button>
            </div>
        </div>
    )
}